<template>
  <div class="container">
    <!-- 上边按钮 -->
    <el-row class="btnContent" style="display: flex">
      <el-button
        type="primary"
        class="el-icon-circle-plus-outline"
        @click="addHandle"
        >添加</el-button
      >
      <el-form label-width="80px" inline style="margin-left: 20px">
        <el-select
          v-model="searchAll"
          placeholder="请选择查询条件"
          style="width: 120px; margin-right: 10px"
        >
          <el-option label="所有" value="all"></el-option>
          <el-option label="服务名称" value="name"></el-option>
          <el-option label="服务类型" value="type"></el-option>
          <el-option label="服务价格" value="price"></el-option>
        </el-select>
        <el-form-item>
          <el-input
            autocomplete="off"
            v-model="searchContent"
            placeholder="请输入"
          ></el-input>
        </el-form-item>
        <el-button type="primary" class="el-icon-search" @click="searchHandle"
          >搜索</el-button
        >
      </el-form>
    </el-row>
    <!-- 新增页面 -->
    <el-drawer
      title="新增服务"
      direction="rtl"
      :visible.sync="dialog"
      custom-class="demo-drawer"
      size="50%"
    >
      <div class="demo-drawer__content">
        <el-form style="width: 300px; margin: 0 auto">
          <el-form-item label="服务名称">
            <el-input
              autocomplete="off"
              v-model="addServiceContent.name"
            ></el-input>
          </el-form-item>
          <el-form-item label="服务类型">
            <div>
            <el-select
              v-model="addServiceContent.type"
              placeholder="请选择服务类型"
              style="width: 160px;">
              <el-option label="自定义DIY" value="自定义DIY"></el-option>
              <el-option label="私人定制" value="私人定制"></el-option>
            </el-select>
            </div>
          </el-form-item>
          <el-form-item label="价格">
            <el-input
              autocomplete="off"
              v-model="addServiceContent.price"
            ></el-input>
          </el-form-item>
          <el-form-item label="服务描述">
            <el-input
              type="textarea"
              v-model="addServiceContent.describe"
            ></el-input>
          </el-form-item>
        </el-form>
        <div class="demo-drawer__footer" style="">
          <span style="margin-right: 10px">
            <el-button type="primary" @click="addService">确 定</el-button>
          </span>
          <el-button @click="cancelHandle">取 消</el-button>
        </div>
      </div>
    </el-drawer>
    <!-- 修改页面 -->
    <el-dialog title="修改服务" :visible.sync="updatePage">
      <el-form>
        <el-form-item label="服务名称">
          <el-input
            autocomplete="off"
            style="width: 300px"
            v-model="updateContent.name"
          ></el-input>
        </el-form-item>
        <el-form-item label="服务类型">
          <el-input
            autocomplete="off"
            style="width: 300px"
            v-model="updateContent.type"
          ></el-input>
        </el-form-item>
        <el-form-item label="服务价格">
          <el-input
            autocomplete="off"
            style="width: 300px"
            v-model="updateContent.price"
          ></el-input>
        </el-form-item>
        <el-form-item label="服务描述">
          <el-input
            type="textarea"
            style="width: 300px"
            v-model="updateContent.describe"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <span style="margin-right: 10px">
          <el-button type="primary" @click="updateService"
            >确 定</el-button
          ></span
        >
        <el-button>取 消</el-button>
      </div>
    </el-dialog>
    <!-- 数据渲染 -->
    <el-table :data="serviceArr" border style="width: 100%; margin: auto">
      <!-- 点击后显示的服务详情 -->
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="服务名称：">
              <span>{{ props.row.name }}</span>
            </el-form-item>
            <el-form-item label="服务类型：">
              <span>{{ props.row.type }}</span>
            </el-form-item>
            <el-form-item label="价格：">
              <span>{{ props.row.price }}</span>
            </el-form-item>
            <el-form-item label="服务描述：">
              <span>{{ props.row.describe }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <!-- 粗略的服务信息 -->
      <el-table-column prop="name" label="服务名称"> </el-table-column>
      <el-table-column prop="type" label="服务类型"> </el-table-column>
      <el-table-column prop="price" label="价格"> </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="updateHandle(scope.row)"
            >修改</el-button
          >
          <el-button size="mini" type="danger" @click="delHandle(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="block">
      <el-pagination
        ref="info"
        background
        @size-change="handleSizeChange"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="1"
        :current-page="1"
        @current-change="handleCurrentChange"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script>
import service from "../../utils/request";
export default {
  data() {
    return {
      serviceArr: [], // 服务
      dialog: false,
      updatePage: false,
      checkAll: false,
      isIndeterminate: true,
      adminId: localStorage.getItem("adminId"), // 当前管理员的id
      // 添加数据
      addServiceContent: {
        name: "",
        type: "",
        price: "",
        shopDoorId: [],
        describe: "",
        adminId: localStorage.getItem("adminId"),
      },
      // 修改数据
      updateContent: {
        _id: "",
        name: "",
        type: "",
        price: "",
        describe: "",
      },
      searchAll: "all",
      searchContent: "",
      total: 0,
    };
  },
  computed: {
    shopList() {
      return this.$store.getters["service/getShopList"].rows;
    },
  },
  mounted() {
    service.get(`/service`).then((res) => {
      let oneServiceArr = res.rows.filter((item) => {
        return item.adminId._id == this.adminId;
      });
      this.serviceArr = oneServiceArr; // 将筛选出的对应的门店赋值给数组
      this.total = this.serviceArr.length;
    });
    this.$store.dispatch("service/getShopAction");
  },
  methods: {
    render() {},
    //显示添加页面
    addHandle() {
      this.dialog = true;
    },
    // 确认添加
    addService() {
      this.$store
        .dispatch("service/addServiceAction", this.addServiceContent)
        .then(() => {
          service.get(`/service`).then((res) => {
            this.serviceList = res.rows;
            this.total = res.total;
          });
        });
      this.dialog = false;
    },
    cancelHandle() {
      this.$confirm("退出将失去你所输入的数据，是否继续？")
        .then((_) => {
          this.dialog = false;
        })
        .catch((_) => {});
    },
    // 修改
    updateHandle(res) {
      this.updatePage = true;
      this.updateContent._id = res._id;
      this.updateContent.name = res.name;
      this.updateContent.type = res.type;
      this.updateContent.price = res.price;
      this.updateContent.describe = res.describe;
    },
    //确认修改
    updateService() {
      this.$store
        .dispatch(
          "service/updateServiceAction",
          this.updateContent,
          this.updateContent.id
        )
        .then(() => {
          service.get(`/service`).then((res) => {
            this.serviceList = res.rows;
            this.total = res.total;
          });
        });
      this.updatePage = false;
    },
    // 删除
    delHandle(res) {
      this.$confirm("是否删除该服务?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$store.dispatch("service/delServiceAction", res._id).then(() => {
            service.get(`/service`).then((res) => {
              this.serviceList = res.rows;
              this.total = res.total;
            });
          });
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 查询
    searchHandle() {
      if (this.searchAll == "all") {
        service.get(`/api/service`).then((res) => {
          this.serviceList = res.rows;
        });
      } else {
        service
          .get(
            `/api/service?value=${this.searchContent}&type=${this.searchAll}`
          )
          .then((res) => {
            this.serviceList = res.rows;
          });
      }
    },
    // 分页
    handleSizeChange() {
      // 每页显示几条数据
      let size = this.$refs.info.internalPageSize;
      // 当前显示第几页
      let current = this.$refs.info.internalCurrentPage;
      service
        .get(`/service`, {
          params: {
            size: size,
            current: current,
          },
        })
        .then((res) => {
          this.serviceList = res.rows;
          this.total = res.total;
        });
    },
    handleCurrentChange() {
      // 每页显示几条数据
      let size = this.$refs.info.internalPageSize;
      // 当前显示第几页
      let current = this.$refs.info.internalCurrentPage;
      service
        .get(`/service`, {
          params: {
            size: size,
            current: current,
          },
        })
        .then((res) => {
          this.serviceList = res.rows;
          this.total = res.total;
        });
    },
  },
};
</script>

<style>
.container {
  padding: 20px;
}
.el-button {
  height: 40px;
}
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 130px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
.el-drawer__body {
  overflow-y: auto;
  height: 100%;
}
.demo-drawer__footer {
  display: flex;
  margin: 0 auto 80px;
  width: 22%;
}
.el-dialog__body {
  width: 500px;
  margin: auto;
}
/* 分页 */
.container .el-pagination {
  margin: 20px 0;
}
</style>